<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>摄像头登录页</title>
    <style>
    	body{
    		height: 100%;
    		width: 100%;
    	}
    	form{
    		height: 350px;
    		width: 400px;
    		margin: calc((100vh - 350px)/2) calc((100vw - 400px)/2);
    	}
    	input{
    		width: calc(90% - 65px);
    		height: 30px;
    		margin: 10px 0;
    	}
    	button{
    		padding: 5px 25px;
    		margin: 10px calc((90% - 166px)/2);
    	}
    </style>
</head>

<body>

    <form action="/api/login" method="post">
        <div class="title">用户名</div>
        <input id="user" name="username" />
        <div class="title">密码</div>
        <input id="password" name="password" type="password" />
        <div class="title">验证码</div>
        <input name="code" autocomplete="off" pattern="\d{4}" />
        <img src="/api/captcha.jpg" alt="验证码" title="点我刷新"
            onclick="this.src='/api/captcha.jpg?'+new Date().getTime()" />
        <button>登录</button>
    </form>

    <div id="msg"></div>

    <script>
        var dg = document.getElementById.bind(document);
        var q = location.search;
        if (q) {
            q = q.substr(1);
            dg('msg').innerText = {
                error: '用户名或密码错误！',
                code: '验证码错误！',
                logout: '退出成功！'
            }[q] || '';
        }
    </script>
</body>

</html>